<!doctype html>
<html lang="en">

<head>
	<title>鑫洋泉运营管理平台</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/vendor/dataTables/jquery.dataTables.min.css">
	<link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
    <link rel="stylesheet" href="../assets/css/sweetalert.css">
	<!-- GOOGLE FONTS -->
	<!--<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">-->
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=cba4b402fa99f77f698ff478bf0ade45"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">
			<h1 class="header_1">
				 鑫洋泉运营管理系统 
			</h1>
		</nav>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="sidebar-scroll">
				<nav>
					<ul class="nav">
                        <li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>首页</span></a></li>
                        <li><a href="device.html" class=""><i class="lnr lnr-chart-bars"></i> <span>车辆信息</span></a></li>
                        <li><a href="custom.html" class=""><i class="lnr lnr-chart-bars"></i> <span>客户信息</span></a></li>
                         
                        <li>
                            <a href="#"><i class="lnr lnr-chart-bars"></i> <span>SIM卡管理</span></a>
                            <ul class="nav">
                                <li><a href="cardsStatistics.html">统计信息</a></li>
                                <li><a href="cardsList.html">列表信息</a></li>
                            </ul>
                        </li>
                       <li>
							<a href="config.html"><i class="lnr lnr-chart-bars"></i> <span>配置管理</span></a>
							<ul class="nav">
								<li><a href="config.html" class=""><span>默认配置列表</span></a></li>
								<li><a href="parameters.html?1" class=""><span>解码类型</span></a></li>
								<li><a href="parameters.html?2" class=""><span>主机盒界面</span></a></li>
								<li><a href="parameters.html?3" class=""><span>前景和前后视角</span></a></li>
								<li><a href="parameters.html?4" class=""><span>转向视角</span></a></li>
								<li><a href="parameters.html?5" class=""><span>轨迹线类型</span></a></li>
						
							</ul>
						</li><!--<li><a href="device_detail.html" class=""><i class="lnr lnr-cog"></i> <span>设备详情</span></a></li>-->
                    </ul>
				</nav>
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5">
					            <h3 class="page-title ">车辆列表</h3>
                        </div>
                        <div class="col-md-2 dropdown">
                            <select class="form-control" id="search_type" onchange="selectOnchang(this)">
                                <option value="plate" selected = "selected">车牌号</option>
                                <option value="serial">设备号</option>
                            </select>
                        </div>
                        <!--<div class=" btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Action <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>-->
                        <div class="col-md-4">
                            <!--<form class="navbar-form navbar-right">-->
                                <form>
                                <div class="input-group">
                                    <input type="text" id="device_id" value="" class="form-control" placeholder="车牌号">
                                    <span class="input-group-btn"><button type="button" class="btn btn-primary" onclick="search()">查询</button></span>
                                    
                                </div>
                            </form>
                        </div>
                        <div class="col-md-1">
                            <span class="input-group-btn"><button type="button" class="btn btn-primary" onclick="addVehicle()">添加</button></span>
                        </div>
                    </div>

                    <div class="row">
                        <table id="example" class="col-md-12 display" cellspacing="0" width="100%">
                        </table>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
        
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">车辆信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 control-label">车名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="name" name="name" value="{name}"
                                        placeholder="车名">
                                </div>
                            </div>
                       
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">设备编号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="serial" value="" id="serial"
                                        placeholder="设备编号">
                                </div>
                            </div>
                            <!--//{ vid, name, serial, plate, vin, ein, created,-->
                            <div class="form-group">
                                <label for="lastname" class="col-sm-3 control-label">车牌号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="plate" value="" id="plate"
                                        placeholder="车牌号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">大驾号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control"  name="vin" value="" id="vin"
                                        placeholder="大驾号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remark" class="col-sm-3 control-label">发动机编号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control"  name="ein" value="" id="ein"
                                        placeholder="发动机编号">
                                </div>
                            </div>
                            <div class="form-group" id="showHidden">
                                <label for="remark" class="col-sm-3 control-label">创建日期</label>
                                <div class="col-sm-9">
                                    <!--<input type="datetime" class="form-control"  name="created" value="" id="created"
                                        placeholder="创建日期">-->
                                    <input id="created" type="date" class="form-control"  name="created" value="2017-05-24" id="created"
                                        placeholder="创建日期">
                                </div>
                            </div>
                            <input type="hidden" id="vid" name="vid">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id='editBtn' class="btn btn-primary" onClick="doEdit()">提交</button>
                        <button type="button" id="addBtn" class="btn btn-primary" onClick="doAdd()">添加</button>
                        </button><span id="tip"> </span>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
		</footer>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="../assets/vendor/jquery/jquery.min.js"></script>
	<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../assets/vendor/dataTables/jquery.dataTables.min.js"></script>
	<script src="../assets/scripts/klorofil-common.js"></script>
    <script src="../assets/vendor/sweetalert.min.js"></script>
    <script>
        //modal function
        var showModal = function (data) {
            //{ vid, name, serial, plate, vin, ein, created,-->
            $('#showHidden').hide();
            if(data) {
                $('#addBtn').hide();
                $('#editBtn').show();

            } else {
                $('#addBtn').show();
                $('#editBtn').hide();
            }
            for(i in data) {
                $('#' + i)[0].value = data[i];
            }

            $('#myModal').modal('show');

        }

        var addVehicle = function () {
            cleanData();
            showModal();
        }
        var cleanData = function () {
            $('#vid').val('')
            $('#name').val('');
            $('#serial').val('');
            $('#plate').val('');
            $('#vin').val('');
            $('#ein').val('');
        }
        var getData = function () {
            var data = {};
            if($('#vid').val()!==''){data.vid = $('#vid').val();}
            data.name = $('#name').val().trim();
            data.serial = $('#serial').val().trim();
            data.plate = $('#plate').val().trim();
            data.vin = $('#vin').val().trim();
            data.ein = $('#ein').val().trim();
            return data;
        }
        var doAdd = function () {
            var data = getData();
            var url = " /oss-ws/ws/0.1/vehicle/add"
            doAjax(data, url);
        }
        var doEdit = function () {
            var data = getData();
            var url = ' /oss-ws/ws/0.1/vehicle';
            // data.created = $('#created')[0].value;
            doAjax(data, url);
        }
        var doAjax = function (data, url) {
            $.ajax(
                {
                    url: url,
                    // url: "../ws/0.1/vehicle",
                    // data: data,
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    dataType: "json",
                    beforeSend:function()
                    {
                        $("#tip").html("<span style='color:blue'>正在处理...</span>");
                        return true;
                    },
                    success:function(data)
                    {
                        $("#tip").html("<span style='color:blue'></span>");
                // "url": "../ws/0.1/vehicle/datas",
                        if(data.code == 200)
                        {
                            table.ajax.url('/oss-ws/ws/0.1/vehicle/datas').load();
                            // table.ajax.url('../ws/0.1/vehicle/datas').load();
                        }
                        else
                        {
                            sweetAlert("error", data.message,"error");
                        }
                        $('#myModal').modal('hide');
                    },
                    error: function()
                    {
                        $("#tip").html("<span style='color:blue'></span>");
                        alert('请求出错');
                    },
                    complete: function()
                    {
                    }
                });
        }
        var deleteDvice = function (id) {
            swal({
                title: "确定删除吗？",    
                type: "warning",   
                showCancelButton: true,    
                confirmButtonColor: "#DD6B55",
                cancelButtonText: "取消", 
                confirmButtonText: "确定！",    
                closeOnConfirm: false }, 
                function() { 
                    $.ajax(
                        {
                            url: "/oss-ws/ws/0.1/vehicle?vid=" + id,
                            // url: "../ws/0.1/vehicle",
                            // data: data,
                            type: "delete",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            beforeSend:function()
                            {
                                return true;
                            },
                            success:function(data)
                            {
                                if(data.code == 200)
                                {
                                    swal("删除！", "删除成功", "success");
                                    table.ajax.url('/oss-ws/ws/0.1/vehicle/datas').load();
                                }
                                else
                                {
                                    sweetAlert("error", data.message,"error");
                                }
                            },
                            error: function()
                            {
                                alert('请求出错');
                            },
                            complete: function()
                            {
                            }
                        });
                });
        }
        var showMap = function (vid) {

            $.ajax(
                {
                    url: "/oss-ws/ws/0.1/vehicle/position?vid=" + vid,
                    // url: "../ws/0.1/vehicle",
                    // data: data,
                    type: "get",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    beforeSend:function()
                    {
                        return true;
                    },
                    success:function(data)
                    {
                // "url": "../ws/0.1/vehicle/datas",
                        if(data.code == 200)
                        {
                            var points = data.dataObject;
                            window.open('vehicle_position.html?'+points.lat+'&'+points.lng);
	
                            
                        }
                        else
                        {
                            alert(data.message);
                        }
                        // $('#container').modal('hide');
                    },
                    error: function()
                    {
                        alert('请求出错');
                    },
                    complete: function()
                    {
                    }
                });
        }

    var table = $('#example').DataTable( {
        oLanguage: {
            "sUrl": " ../oss-ws/assets/vendor/dataTables/zh_CN.json"
        },
        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            }
        ],
        //左下角信息
        info: false,
        //关闭行数选择
        "lengthChange": false,
        //关闭本地搜索
        "searching": false,
        //关系列排
		
        // "ajax": '../assets/vehicle.txt',
         //"serverSide": true,//分页，取数据等等的都放到服务端去
            //"deferRender": true,//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
            "destory": true,
            ajax: {
                "dataType": 'json',
                "type": "get",
                // "url": "../ws/0.1/vehicle/datas",
                "url": "/oss-ws/ws/0.1/vehicle/datas",
                "async": false
            },
            "columns": [
            //{ vid, name,serial, plate, vin, ein, created,
                {
                    "data": "vid",
                    "title": ''
                }, {
                    "data": "name",
                    "title": "车名"
                }, {
                    "data": "serial",
                    "title": "设备编号"
                }, {
                    "data": "plate",
                    "title": "车牌"
                }, {
                    "data": "vin",
                    "title": "大驾号"
                },{
                    "data": "ein",
                    "title": "发动机编号"
                },{
                    "data": "created",
                    "title": "创建日期"
                },{
					"data": "vid",
                    "title": "关联",
					render: function (data) {
                        return "<a href='device_detail.html?vid="  + data + "?vehicle?customers'>用户关系 </a><a href='device_detail.html?vid="  + data + "?vehicle?sims'>卡关系 </a>";
                    }
				},{
                    "data": function ( row, type, val, meta ) {
                        
                        return row;
                    },
                    "title": "操作",
                    render: function (row, data) {

                        return "<a class='' href='#' onclick='showModal(" + JSON.stringify(row) + ")'>编辑</a> <span>    </span>"+"<a class='' href='#' onclick='deleteDvice(" + row.vid + ")'>删除</a><span>    </span>"+"<a href='#' onclick=showMap(" + row.vid + ")>位置</a>";
                    }
                }
            ]
    } );

    function selectOnchang(me) {
        var id = $('#device_id');
        var search_type = $('#search_type')[0];
        if(me.value === "serial") {
            id.attr("placeholder", "设备号");
        } else {
            id.attr("placeholder", "车牌号");
        }

    }
    function search() {
        var id = $('#device_id').val().trim();//$('#device_id')[0];
        var search_type = $('#search_type').val().trim();//$('#search_type')[0];
		// var oSettings = table.fnSettings();
        if(id != '' && search_type != '') {
            
            table.ajax.url('/oss-ws/ws/0.1/vehicle/data?name=' + search_type + '&value=' + id).load()
            // table.ajax.url('ws/0.1/vehicle/datas').load()
			
        }else {
            table.ajax.url('/oss-ws/ws/0.1/vehicle/datas').load()
        }

    }
    </script>
</body>

</html>
